<template>
    <el-drawer title="设置轮播图" v-model="dislogVisible" direction="rtl" size="50%" destroy-on-close>
        <el-form :model="form" label-width="80px">
            <el-form-item label="轮播图">
                <ChooseImage :limit="9" v-model="form.banners" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<script setup>
import { ref, reactive } from "vue"
import ChooseImage from '~/components/ChooseImage.vue'
const dislogVisible = ref(false)
import { readGoods, setGoodsBanner } from '~/api/goods.js'
import { toast } from '~/composables/util.js'

const form = reactive({
    banners: []
})

const goodsId = ref(0)
//打开抽屉的方法 
const open = (row) => {
    // 点击设置轮播图，获取到商品的信息。
    goodsId.value = row.id
    row.bannersLoading = true
    readGoods(goodsId.value).then(res => {
        console.log(res);
        form.banners = res.goodsBanner.map((item) => {
            return item.url
        })
        dislogVisible.value = true
    }).finally(() => {
        row.bannersLoading = false
    })
}

const emit = defineEmits(['reloadData'])

const loading = ref(false)
const submit = () => {
    loading.value = true
    console.log(goodsId.value);
    console.log(form);
    setGoodsBanner(goodsId.value, form).then(res => {
        toast('设置轮播图成功')
        emit('reloadData')
        dislogVisible.value = false
    }).finally(() => {
        loading.value = false
    })
}

defineExpose({
    open
})
</script>